<script setup>
import {storeToRefs} from "pinia";

import CartCard from "@/components/CartCard.vue";
import useCheckedCartStore from "@/stores/cart/CheckedCart.js";
import useUserCartStore from "@/stores/cart/Cart.js";
import router from "@/router/index.js";

// 生成选中购物车类的实例
const CheckedCart = useCheckedCartStore();  
const UserCart = useUserCartStore();

let { checkedCart } = storeToRefs(CheckedCart);
const {cart} = storeToRefs(UserCart);
console.log(cart.value);
console.log(checkedCart.value);


// console.log("Cart:",cart);
//   console.log("checkedCart:",checkedCart);

  // checkedCart.value[0].list[0].number = 0
  // checkedCart[0].list=JSON.parse(JSON.stringify(checkedCart[0].list));

  console.log("Cart:",cart);
  console.log("checkedCart:",checkedCart);

// console.log(cart);
// cart.value.forEach((item,index) =>{
//   if (item.list.length===0) {
//     console.log(22);
//       cart.value.splice(index,1)
//   }
// })

// 删除空的购物车  
// for (let i = 0; i < cart.value.length; i++) { 
//   console.log(1);
//   console.log(cart.value[i]);
//     if (cart.value[i].list.length===0) {
//       cart.value.splice(i,1);
//       i--; //避免splice删除后当前i已被循环过,导致这个位置的i不遍历了,后一个i平移到这一个的位置,i++就没获取了,掠过了
//     } 
// }
// 删除空的选中购物车
for (let i = 0; i < checkedCart.value.length; i++) {
  
    if (checkedCart.value[i].list.length===0) {
      checkedCart.value.splice(i,1);
      i--;
      
    }
}


// console.log(checkedCart.value);

// for (let i = 0; i < cart.value.list.length; i++) {
//     if (cart.value[i].list.length===0 ) {
//       cart.value.splice(i,1);
//       i--; //避免splice删除后当前i已被循环过,导致这个位置的i不遍历了,后一个i平移到这一个的位置,i++就没获取了,掠过了
//     } 
// }

const orderConfirm = (shopName,shopId) =>{
  router.push({
    path:"/OrderConfirm",
    query:{shopName: shopName,id:shopId,from:"cart"},

  })
}
// console.log(cart);

// 错了要怎么解决--那些隐藏在代码逻辑中的
</script>

<template>
  <div class="cart_list">
    <div class="cart_list_header">
      我的全部购物车
      <span v-if="checkedCart.length>0">({{checkedCart.length}})</span>
    </div>
    <div class="cart_list_content" >
      <template v-for="(item,index) in checkedCart" :key="item.name" >
        <div class="cart_list_content_item">
          <CartCard :CartItem="item" @click="orderConfirm(item.name,index)"/>
        </div>
    </template>

    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.cart_list {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0.5rem;
  background-color: $dark-bgColor;
  overflow-y: scroll;

  &_header {
    padding: 0.08rem 0.18rem;
    font-size: 0.16rem;
    color: $content-fontcolor;
    text-align: center;
    line-height: 0.24rem;
    background-color: $bgColor;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  &_content {
    margin-top: 0.58rem;
  }
}
</style>